<div class="content-section introduction ">
    <div>
        <span class="feature-title">值班管理<span class="gt">&gt;</span>新增计划  </span>
    </div>
</div>
<p-progressBar mode="indeterminate" [hidden]="progressBar"></p-progressBar>
<div class="content-section implementation GridDemo" id="dutyAdd">
    <div class="title col-sm-12">
        <div class="col-sm-1">
            <span>基本信息</span>
        </div>
        <div class="col-sm-11 pull-right">
            <button type="button"
                    class="pull-right"
                    pButton
                    [routerLink]="['/index/duty/manage']"
                    icon="fa-close"
                    style="width: 30px"></button>
        </div>
    </div>
    <p-messages [(value)]="msgs"></p-messages>
    <form [formGroup]="newSchdule" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-1 control-label" >计划编号：</label>
            <div class="col-sm-5 ui-no-padding-left-15px">
                <input class=" form-control cursor_not_allowed"
                       type="text" formControlName="scheduleId"
                       pInputText id="did"
                       [(ngModel)]="defaultId"
                       placeholder="编号在保存后自动生成"
                       readonly/>
            </div>
            <label class="col-sm-1 control-label">排班人员：</label>
            <div class="col-sm-5 ui-no-padding-left-15px">
                <input  class="form-control cursor_not_allowed"
                        formControlName="scheduleCreator"
                        type="text" pInputText id="creator"
                        readonly
                        [(ngModel)]="defaultCreator"
                        placeholder="首次创建系统自动生成排班人员"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label ">
                <span ngClass="start_red">*</span>
                计划名称：
            </label>
            <div class="col-sm-5 ui-no-padding-left-15px">
                <input formControlName="schduleName"
                       class="form-control"
                       type="text"
                       pInputText id="name"
                       placeholder="请填写计划名称"
                       [class.my-dirty]="isName"/>
            </div>
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                排班时间：
            </label>
            <div class="col-sm-5 ui-no-padding-left-15px">
                <input class=" form-control cursor_not_allowed"
                       type="text"
                       formControlName="scheduleCreateTime"
                       pInputText id="create_time"
                       readonly
                       [ngModel]="defaultCreateTime"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                值班部门：
            </label>
            <div class="col-sm-5 ui-no-padding-left-15px">
                <div class="col-sm-8 ui-fluid ui-fluid-no-padding">
                    <input type="text"
                           class="form-control"
                           pInputText
                           name="department"
                           placeholder="请选择值班部门"
                           [(ngModel)]="selectedDepartment"
                           readonly class="cursor_not_allowed"
                           formControlName="schduleDepartment" />
                </div>
                <div class="col-sm-2 ui-fluid-no-padding ui-padding-10px">
                    <button pButton type="button" ngClass="ui-g-12  ui-fluid-no-padding" (click)="showTreeDialog()" label="选择"></button>
                </div>
                <div class="col-sm-2 ui-fluid-no-padding ui-padding-10px">
                    <button pButton type="button" ngClass="ui-g-12  ui-fluid-no-padding" (click)="clearTreeDialog()" label="清空"></button>
                </div>
            </div>
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                审批人：
            </label>
            <div class="col-sm-5 ui-fluid ui-no-padding-left-15px">
                <p-autoComplete
                        formControlName="scheduleApprovor"
                        [(ngModel)]="approveSelectedMultipleOption"                                                            [suggestions]="approveSearchOptions"
                        (completeMethod)="filterApproverMultiple($event)"
                        [minLength]="1"
                        [required]="true"
                        placeholder="请选择审批人"
                        field="name"
                        [multiple]="true"
                        name="test"
                        [dropdown]="true"
                        id="approval">
                </p-autoComplete>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                开始时间：
            </label>
            <div class="col-sm-5 ui-fluid ui-no-padding-left-15px">
                <p-calendar
                        formControlName="schduleStart"
                        [(ngModel)]="beginTime"
                        [showIcon]="true" [locale]="zh" name="beginTime"
                        [styleClass]="'schedule-add'"
                        dateFormat="yy-mm-dd"
                        [required]="true"
                        [minDate]="initStartTime"
                        (onSelect) = "startTimeSelected(beginTime)"
                        id="startCalendar">
                </p-calendar>
            </div>
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                结束时间：
            </label>
             <div class="col-sm-5 ui-no-padding-left-15px">
                <p-calendar
                        ngClass="ui-fluid"
                        formControlName="schduleEnd"
                        [(ngModel)]="endTime"
                        [showIcon]="true"
                        [locale]="zh"
                        name="end_time"
                        [styleClass]="'schedule-add'"
                        dateFormat="yy-mm-dd"
                        [required]="true"
                        [minDate]="minEndTime"
                        id="endCalendar">
                </p-calendar>
             </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                排班班次：
            </label>
            <div class="col-sm-11 ui-no-padding-left-15px">
                <p-autoComplete
                        ngClass="ui-fluid"
                        formControlName="schduleShift"
                        [(ngModel)]="shiftSelectedMultipleOption"
                        [suggestions]="shiftSearchOptions"
                        (completeMethod)="filterShiftMultipe($event)"
                        [minLength]="1" [required]="true"
                        placeholder="请选择排班班次"
                        field="name"
                        [multiple]="true"
                        name="test"
                        [dropdown]="true">
                </p-autoComplete>
            </div>
        </div>
        <div class="form-group" >
            <label class="col-sm-1 control-label">关联排班：</label>
            <div class="col-sm-11 ui-no-padding-left-15px">
                <p-autoComplete
                        ngClass="ui-fluid"
                        formControlName="schduleRelative"
                        [(ngModel)]="relativeSelectedMultipleOption"
                        [suggestions]="relativeSearchOptions"
                        (completeMethod)="filterRelativeMutipe($event)"
                        [minLength]="1"
                        placeholder="请选择关联排班"
                        field="name"
                        name="test"
                        [dropdown]="true"
                >
                </p-autoComplete>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12 ui-no-padding-left-15px">
                <button
                        class="pull-right"
                        pButton
                        type="button"
                        (click)="downloadModel()"
                        label="生成排班表"
                        [disabled]="hadSaved"></button>
                <!--<div class="">-->
                <p-fileUpload
                        class="pull-right ui-margin-right-10px"
                        #fubauto
                        mode="basic"
                        name="file"
                        url="{{ uploadIp }}"
                        *ngIf="downloadBtn"
                        accept="application/*"
                        maxFileSize="1000000"  auto="true" chooseLabel="导入排班表"
                        (onBeforeUpload)="onBeforeUpload($event)"
                        (onUpload)="onUpload($event)">
                </p-fileUpload>
                <button pButton
                        class="pull-right ui-margin-right-10px"
                        type="button"
                        label="导入排班表"
                        [disabled]="hadDownload"
                        *ngIf="hadDownload"
                        (onUpload)="onBasicUpload($event)" ></button>
                <!--</div>-->
                <button pButton
                        class="pull-right ui-margin-right-10px"
                        type="button"
                        (click)="submit()"
                        label="保存"
                        [disabled]="saved"></button>
            </div>
        </div>
</form>
    <p-growl [(value)]="msgPop"></p-growl>
    <p-dialog header="部门选择" [(visible)]="departementDisplay" modal="modal" width="300" [responsive]="true">
        <p-tree [value]="filesTree4"
                selectionMode="checkbox"
                [(selection)]="selected"
                (onNodeExpand)="nodeExpand($event)"
        ></p-tree>
        <!--<div>Selected Nodes: <span *ngFor="let file of selected">{{file.label}} </span></div>-->
        <p-footer>
            <button type="button" pButton icon="fa-check" (click)="closeTreeDialog()" label="确定"></button>
            <button type="button" pButton icon="fa-close" (click)="departementDisplay=false" label="取消"></button>
        </p-footer>
    </p-dialog>
  <!--<form [formGroup]="form">-->
    <!--<div class="form-group">-->
      <!--<label for="user">username</label>-->
      <!--<input id="user" type="text" class="form-control" formControlName = "username"-->
             <!--[class.my-dirty] = "isDirty">-->
    <!--</div>-->
  <!--</form>-->
</div>
